<template>
    <div class="home">
        <div class="lbptBox">
            <el-carousel :interval="5000" arrow="always" style="height: 100%;">
                <el-carousel-item v-for="item in imgList" :key="item" style="height: 100%;">
                    <img class="lbimg" :src="item" alt="" style="object-fit: contain;">
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="btmBox">
            <div class="leftBox">
                <h2 style="width: 100%; margin: 20px 0px">攻略推荐</h2>
                <div class="guideBox">
                    <ul>
                        <li v-for="(item, index) in guideList" :key="index" @click="guidClick(item)">
                            <div class="guidetitle">
                                《{{ item.guide_name }}》
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="rightBox">
                <div>
                    <h2 style="margin: 20px;">热门景点</h2>
                    <div>
                        <el-col :span="8" v-for="(item, index) in spotsList" :key="index">
                            <el-card shadow="hover" :body-style="{ padding: '0px', margin: '10px' }"
                                style="overflow: hidden;margin: 5px;">
                                <img :src="item.spot_img[0]" class="image" @click="spotClick(item)">
                                <div style="padding: 14px;">
                                    <span>{{ item.spot_name }}</span>
                                </div>
                            </el-card>
                        </el-col>
                    </div>
                </div>
            </div>
        </div>
        <el-backtop :right="60" :bottom="100" />
    </div>
</template>

<script>
import api from '@/api'
export default {
    data() {
        return {
            pageIndex: 1,
            pageSize: 10,
            total: 10,
            imgList: [],
            spotsList: [],
            guideList: [],
            guideList2: [],
            usercity: ''
        };
    },
    mounted() {
        this.getSpotsList()
        this.getGuide()
        this.usercity = localStorage.userCity
    },
    methods: {
        async getSpotsList() {
            let res = await api.getSpots({ pageIndex: this.pageIndex, pageSize: this.pageSize })
            if (res?.code == 200) {
                this.spotsList = res.data
                for (let i = 0; i < 5; i++) {
                    this.imgList.push(res.data[i].spot_img[0])
                }
                console.log(this.imgList);
            } else {
                this.spotsList = []
            }
        },
        async getGuide() {
            let res = await api.getGuide({ pageIndex: this.pageIndex, pageSize: this.pageSize })
            if (res?.code == 200) {
                for (let i = 0; i < res.data.length; i++) {
                    if (res.data[i].guide_place == this.usercity) {
                        this.guideList.push(res.data[i])
                    } else {
                        this.guideList2.push(res.data[i])
                    }
                }
                this.guideList.push(...this.guideList2)
            } else {
                this.guideList = []
            }
        },
        guidClick(item) {
            localStorage.guideid = item._id
            this.$router.push({
                path: '/showguideview'
            })
        },
        spotClick(item) {
            localStorage.spotsid = item._id
            this.$router.push({
                path: '/showspot'
            })
        },
    }
};
</script>

<style scoped>
.home {
    width: 100%;
    height: 100vh;
}

.lbptBox {
    width: 86%;
    height: 600px;
    margin: 0 auto;
}

.lbimg {
    width: 100%;
    object-fit: cover;

}

.lbptBox:deep(.el-carousel__container) {
    height: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
} */

.el-backtop {
    border-radius: 0px !important;
    color: rgb(0, 184, 55) !important;
}

.btmBox {
    width: 86%;
    display: flex;
    margin: 10px auto;
    justify-content: space-between;
}

.leftBox {
    width: 20%;
    height: 600px;
}

.guideBox {
    width: 100%;
    height: 600px;
}

li {
    list-style: none;
    width: 100%;
}

.guidetitle {
    height: 60px;
    line-height: 60px;
    width: 100%;
    border-bottom: 1px solid #eee;
    background-color: #eeeeee;
    margin: 10px 0;
    text-align: center;
    border-radius: 10px;
}

.guidetitle:hover {
    background-color: #ddd;
}

.rightBox {
    width: 78%;
    height: 600px;
}

.image {
    width: 100%;
    height: 400px;
    object-fit: cover;
}
</style>